<script setup>
import {defineSchedule} from "../store/scheduleStore.js";
import {onMounted} from "vue";
import instance from "../until/request.js";
import {defineUser} from "../store/userStore.js";

let schedule=defineSchedule()
let sysUser=defineUser()

// 组件挂载后加载数据
onMounted(() => {
  schedule.loadSchedules();
});

// 新增日程
async function addItem(){
  try {
    console.log("正在添加日程，用户ID:", sysUser.uid);

    // 修复：使用正确的参数传递方式
    let {data} = await instance.get("/schedule/addDefaultSchedule",{
      params: {
        uid: sysUser.uid
      }
    })

    console.log("接口返回数据:", data);

    if(data.code == 200){
      await schedule.loadSchedules();
    }else{
      alert("添加失败: " + (data.message || "未知错误"))
    }
  } catch (error) {
    console.error("添加日程时发生错误:", error);
    alert("网络请求失败，请检查网络连接");
  }
}

// 更新日程的方法
async function updateItem(index){
  try {
    // 修复：确保发送正确的JSON数据
    let {data} = await instance.post("/schedule/updateSchedule", schedule.itemList[index], {
      headers: {
        'Content-Type': 'application/json'
      }
    })

    if(data.code == 200){
      // 服务端修改完毕后,刷新页面数据
      await schedule.loadSchedules();
    }else{
      alert("更新异常: " + (data.message || "未知错误"))
    }
  } catch (error) {
    console.error("更新日程时发生错误:", error);
    alert("网络请求失败，请检查网络连接");
  }
}
/*
// 添加删除功能
async function removeItem(index) {
  try {
    const sid = schedule.itemList[index].sid;
    let {data} = await instance.get("/schedule/removeSchedule", {
      params: {
        sid: sid
      }
    });

    if(data.code == 200){
      await schedule.loadSchedules();
    }else{
      alert("删除失败: " + (data.message || "未知错误"))
    }
  } catch (error) {
    console.error("删除日程时发生错误:", error);
    alert("网络请求失败，请检查网络连接");
  }
}*/
async function removeItem(index) {
  try {
    const sid = schedule.itemList[index].sid;
    console.log("正在删除日程，SID:", sid);
    let {data} = await instance.get("/schedule/removeSchedule", {
      params: {
        sid: sid
      }
    });
    console.log("删除接口返回数据:", data);

    if(data.code == 200){
      await schedule.loadSchedules();
    }else{
      alert("删除失败: " + (data.message || "未知错误"))
    }
  } catch (error) {
    console.error("删除日程时发生错误:", error);
    alert("网络请求失败，请检查网络连接");
  }
}
</script>

<template>
  <div>
    <h3 class="ht">您的日程如下</h3>
    <table class="tab" cellspacing="0px">
      <tr class="ltr">
        <th>编号</th>
        <th>内容</th>
        <th>进度</th>
        <th>操作</th>
      </tr>
      <tr class="ltr" v-for="(item,index) in schedule.itemList" :key="item.sid">
        <td v-text="index+1">
        </td>
        <td>
          <input type="text" v-model="item.title">
        </td>
        <td>
          <input type="radio" :value="1" v-model.number="item.completed"> 已完成
          <input type="radio" :value="0" v-model.number="item.completed"> 未完成
        </td>
        <td class="buttonContainer">
          <button class="btn1" @click="removeItem(index)">删除</button>
          <button class="btn1" @click="updateItem(index)">保存修改</button>
        </td>
      </tr>
      <tr class="ltr buttonContainer" >
        <td colspan="4">
          <button class="btn1" @click="addItem()">新增日程</button>
        </td>
      </tr>
    </table>
  </div>
</template>


<style scoped>
.ht{
 text-align: center;
     color: cadetblue;
     font-family: 幼圆;
   }
   .tab{
       width: 80%;
       border: 5px solid cadetblue;
       margin: 0px auto;
       border-radius: 5px;
       font-family: 幼圆;
     }
   .ltr td{
       border: 1px solid powderblue;
     }
   .ipt{
       border: 0px;
       width: 50%;
     }
   .btn1{
       border: 2px solid powderblue;
       border-radius: 4px;
       width:100px;
       background-color: antiquewhite;
     }
   #usernameMsg , #userPwdMsg {
       color: gold;
     }
   .buttonContainer{
       text-align: center;
     }
</style>
